<!--
* @description 日常巡检
* @author zywu
* @date 2021/01/05 20:41:40
!-->
<template>
	<li class="item">
		<p class="item-tt">日常运维管理</p>

		<!-- 日常巡检 -->
		<div v-if="mochaIiom" class="maintainInspectView">
			<p class="policeTt"><img src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png" style="vertical-align:middle;width:25px;height:25px;">
				日常巡检
			</p>
			<div class="maintainInspectDetail d-flex ai-center">
				<div class="inspect-circle is-complete">
					<van-circle v-model="finishRateValue" :rate="finishRate" size="120px" :stroke-width="70" layer-color="#f0f0f0" color="#75CD7E">
						<div class="inspect-circle__text" slot>
							<div class="inspect-circle__day"><span class="inspect-circle__daynum">{{mochaIiom.completeDay}}</span>天</div>
							<div>巡检完成</div>
						</div>
					</van-circle>
				</div>
				<div class="inspect-circle is-uncomplete">
					<van-circle v-model="unfinishRateValue" :rate="unfinishRate" size="120px" :stroke-width="70" layer-color="#f0f0f0" color="#a5a5a5">
						<div class="inspect-circle__text" slot>
							<div class="inspect-circle__day"><span class="inspect-circle__daynum">{{mochaIiom.notCompleteDay}}</span>天</div>
							<div>巡检未完成</div>
						</div>
					</van-circle>
				</div>
			</div>
			<p class="notFinishedDec">坚持巡检，必有收获，加油！</p>
			<!-- <div v-if="mochaIiom.notCompleteDay>0" class="data-table" style="margin-top:7px;">
				<div style="font-size:14px;">巡检未完成清单</div>
				<table class="duty-table" id="dutyTable" border="0" cellpadding="0" cellspacing="0" style="margin-top:10px;">
					<thead>
						<tr>
							<th width="80px">日期</th>
							<th width="50px">完成度</th>
							<th>负责人</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,i) in mochaIiom.indicator.filter(n=>{ return n.dayFinishedPercent!=100 })" :key="i">
							<td>{{item.strDate}}</td>
							<td>{{item.dayFinishedPercent}}%</td>
							<td>{{item.accountName}}</td>
						</tr>
					</tbody>
				</table>
			</div> -->
		</div>

		<!-- 隐患整改 -->
		<div v-if="indicator" class="troubleView">
			<p class="policeTt"><img src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png" style="vertical-align:middle;width:25px;height:25px;">
				隐患整改
			</p>
			<div class="troubleDetail">
				<div class="troubleNum">
					<div>
						<span id="hideTotal">{{hideDanger.hideTotal||0}}</span>
						<p>本{{periodName}}提报隐患</p>
					</div>
					<div style="margin-left: 9%">
						<span style="color:#2E76CA" id="hidecompleteNum">{{hideDanger.hidecompleteNum||0}}</span>
						<p>整改完成</p>
					</div>
				</div>
				<div :class="{ 'only-one':hideDangerImgs.length==1 }" class="pic-item" id="troublePic">
					<img v-for="(item,i) in hideDangerImgs" :key="i" :src="item" :onerror="'hideDangerImgError('+i+')'" @click="handlePreview('hideDangerImgs',i)" :style="(i+1)%3==0?'margin-right:0;':''">
				</div>
				<div class="troubleDec">
					隐患险于明火，防范胜于救灾！
				</div>
			</div>
		</div>

		<!-- 维保 -->
		<div v-if="reportData.taskCompleteInfo" class="maintainView">
			<p class="policeTt"><img src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png" style="vertical-align:middle;width:25px;height:25px;">
				维保 (本{{periodName}}任务完成情况)
			</p>
			<div class="maintainDetail" id="maintainDetail">
				<div class="maintainlegend">
					<i></i>本{{periodName}}完成任务<i style="background-color:rgba(153,153,153,1);margin-left: 25px;"></i>本{{periodName}}剩余任务
				</div>
				<div v-for="(item,i) in maintainList" :key="i">
					<div class="sysName">{{item.systemName}}</div>
					<div class="maintanSys">
						<van-progress class="progressbar" :percentage="item.completeNum /( (item.completeNum+item.remainNum)||1 )*100" stroke-width="10" :show-pivot="false" />
						<label style="color:rgba(153,153,153,1);"><a>{{item.completeNum}}</a>/{{item.remainNum}}</label>
					</div>
				</div>
				<img v-if="maintainList.length==0" src="/ilink-app-h5-zd/static/img/ilink_1564368528154.png" style="width:100%" />
			</div>
		</div>

		<!-- 消控室值守 -->
		<div v-if="reportData.controlRoom" class="controlRoomViews">
			<p class="policeTt"><img src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png" style="vertical-align:middle;width:25px;height:25px;">
				消控室值守
			</p>
			<div class="controlRoomDetail" id="controlRoomDetailData">
				<div class="roomInfo">
					<p>无人值守总时长</p>
					<span id="controlRoomTitle">{{controlRoom.title||0}}</span>
				</div>
				<div id="controlRoomPic">
					<img v-for="(item,i) in controlRoomImgs" :key="i" :src="item" @click="handlePreview('controlRoomImgs',i)" :style="(i+1)%3==0?'margin-right:0;':''" >
					<img v-if="controlRoomImgs.length==0" src="/ilink-app-h5-zd/static/img/ilink_1564368528154.png" style="width:100%" />
				</div>
				<p v-if="controlRoom.desc" id="controlRoomDes">{{controlRoom.desc}}</p>
			</div>
		</div>

		<!-- 人员值班 -->
		<div v-if="personnelDuty" class="dutyView">
			<p class="policeTt"><img src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png" style="vertical-align:middle;width:25px;height:25px;">
				人员值班
			</p>
			<div class="dutyDetail">
				<div class="dutyInfo d-flex ai-center">
					<div style="margin-right:10px;">
						<p>正常</p>
						<span style="color:#333" id="normalView">{{personnelDuty.normal}}</span>
					</div>
					<div>
						<p>旷工</p>
						<span style="color:#FA7C5A" id="absenteeismView">{{personnelDuty.noWorkNum}}</span>
					</div>
				</div>
				<div class="dutyInfo d-flex ai-center">
					<div style="margin-right:10px;">
						<p>迟到</p>
						<span style="color:#FFBC37" id="lateView">{{personnelDuty.unStartWorkNum}}</span>
					</div>
					<div>
						<p>早退</p>
						<span style="color:#FDCD73" id="lateEarlyView">{{personnelDuty.unEndWorkNum}}</span>
					</div>
				</div>
				<div class="data-table" style="margin-top:7px;">
					<table class="duty-table" id="dutyTable" border="0" cellpadding="0" cellspacing="0">
						<thead>
							<tr>
								<th style="text-align:left">名称</th>
								<th>正常</th>
								<th>旷工</th>
								<th>迟到</th>
								<th>早退</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,i) in dutyList" :key="i">
								<td style="text-align:left">{{item.watchAccountName}}</td>
								<td>{{item.normal}}</td>
								<td style="color:#FA8768">{{item.noWorkNum}}</td>
								<td style="color:#FFBC37">{{item.unStartWorkNum}}</td>
								<td style="color:#FFBC37">{{item.unEndWorkNum}}</td>
							</tr>
							<tr v-if="dutyList.length==0"><td colspan='5'><img src="/ilink-app-h5-zd/static/img/ilink_1564368528154.png" style="width:100%"/></td></tr>
						</tbody>
					</table>
				</div>

			</div>
		</div>

		<!-- AI云视 -->
		<div v-if="reportData.aiResult" class="controlRoomView">
			<p class="policeTt"><img src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png" style="vertical-align:middle;width:25px;height:25px;">
				AI云视
			</p>
			<div id="aiCloudVideo">
				<div v-for="(item ,i) in aiResult" :key="i" class="aiCloudVideo-item">
					<div v-if="item.code == 'controlRoomUse'" class='bottomCloudVideoBox'>
						<img src='../../assets/img/report/unattended_opearation.png' />
						<div class='bottomCloudVideo'>
							<p>{{item.typeName}}</p>
							<p v-html="updateNumber(item.continueTimeStr)"></p>
						</div>
					</div>
					<div v-else-if="item.code == 'fireEscapeUse'" class='bottomCloudVideoBox'>
						<img src='../../assets/img/report/channel_occupancy.png' />
						<div class='bottomCloudVideo'>
							<p>{{item.typeName}}</p>
							<p v-html="updateNumber(item.continueTimeStr)"></p>
						</div>
					</div>
					<div v-else-if="item.code == 'electricBicycleUse'" class='bottomCloudVideoBox'>
						<img src='../../assets/img/report/electromoblie.png' />
						<div class='bottomCloudVideo'>
							<p>{{item.typeName}}</p>
							<p><span>{{item.times}}</span>次</p>
						</div>
					</div>
					<div v-else-if="item.code == 'gasCanistersUse'" class='bottomCloudVideoBox'>
						<img src='../../assets/img/report/cylinder.png' />
						<div class='bottomCloudVideo'>
							<p>{{item.typeName}}</p>
							<p><span>{{item.times}}</span>次</p>
						</div>
					</div>
				</div>
			</div>
		</div>

	</li>
</template>

<script>
import { ImagePreview } from 'vant'
const defaultImg=require('@/assets/img/common/emptySrc.png')
export default {
	props: {
		reportData: {
			type: Object,
			default: function () {
				return {}
			},
		},
		period: {
			type: [Number, String],
			default: '',
		},
		periodName: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			indicator: {},
			mochaIiom: '',
			finishRate: 0,
			finishRateValue: 0,
			unfinishRate: 0,
			unfinishRateValue: 0,
			hideDanger: {},
			hideDangerImgs: [],
			maintainList: [],
			controlRoom: {},
			controlRoomImgs: [],
			personnelDuty:'',
			dutyList:[],
			aiResult: [],
		}
	},

	components: {},

	computed: {},

	created() {
		window.hideDangerImgError=this.hideDangerImgError
	},

	mounted() {
		let data = this.reportData
		var mochaIiom = Object.assign({},data.mochaIiom) //日常巡检
		if(mochaIiom){
			mochaIiom.completeDay=mochaIiom.completeDay||0
			mochaIiom.notCompleteDay=mochaIiom.notCompleteDay||0
			this.mochaIiom = mochaIiom
			this.finishRate=mochaIiom.completeDay*100/(mochaIiom.completeDay+mochaIiom.notCompleteDay)
			this.unfinishRate=mochaIiom.notCompleteDay*100/(mochaIiom.completeDay+mochaIiom.notCompleteDay)
		}
		this.hideDanger = data.hideDanger
		if (data.hideDanger.picDangerUrls) {
			this.hideDangerImgs = data.hideDanger.picDangerUrls.split(',').splice(0,9)
		}

		if (data.taskCompleteInfo) {
			this.maintainList = data.taskCompleteInfo.taskCompleteInfo
		}

		var controlRoom = data.controlRoom
		if (controlRoom) {
			this.controlRoom = controlRoom
			if (controlRoom.picUrls) {
				this.controlRoomImgs = controlRoom.picUrls.split(',').splice(0,9)
			}
		} else {
			if (data.aiResult) {
				this.aiResult = data.aiResult
			}
		}

		if(data.personnelDuty){
			this.personnelDuty=data.personnelDuty
			this.dutyList=data.personnelDuty.peopleWork
		}
	},

	methods: {
		hideDangerImgError(i){
			this.$set(this.hideDangerImgs,i,defaultImg)
		},
		// 截取字符串中的数字并添加span标签
		updateNumber(str) {
			var output = []
			for (var i = 0, iLen = str.length; i < iLen; i++) {
				if (str[i].match(/\d/)) {
					output.push('<span>' + str[i] + '</span>')
				} else {
					output.push(str[i])
				}
			}
			return output.join('')
		},
		handlePreview(key, i) {
			ImagePreview({
				images: this[key],
				startPosition: i,
			})
		},
		initMaintainChart(data) {
			// myChart.setOption(option, true)
		},
	},
}
</script>
<style lang='scss'>
.maintainInspectView{
	.maintainInspectDetail{
		justify-content: space-around;
	}
	.notFinishedDec{
		margin-top: 30px;
	}
}
.inspect-circle{
	margin: 0 1px;
	&__text{
		margin-top: 50%;
		font-size: 14px;
		color: #000;
		text-align: center;
		transform: translateY(-50%);
	}
	&__day{
		padding-bottom: 5px;
		font-size: 12px;
		color: #999;
	}
	&.is-complete{
		.inspect-circle__daynum{
			font-size: 28px;
			color: #75CD7E;
		}
	}
	&.is-uncomplete{
		.inspect-circle__daynum{
			font-size: 28px;
			color: #333333;
		}
	}
}
</style>